<template>
  <div class="detail overpage" ref="detailRef">
    <navBar
      title="房屋详情"
      left-text="返回"
      :isleft-arrow="true"
      @click="onClickLeft"
    />
    <van-tabs
      class="tab"
      v-model:active="active"
      v-if="isShowTab"
      @click-tab="onClickTab"
    >
      <van-tab
        style="height: 400px"
        v-for="(item, index) in titles"
        :key="index"
        :title="item"
      >
      </van-tab>
    </van-tabs>
    <!-- 轮播图 -->
    <DetailSwipe
      v-if="mainPart.topModule"
      :swipeData="mainPart.topModule.housePicture.housePics"
    />
    <!-- 特惠 -->
    <div class="discounts" v-if="mainPart.topModule">
      特惠价格！ 已优惠{{
        $route.params.productPrice - $route.params.finalPrice
      }}元
    </div>
    <!-- main -->
    <!-- v-memo="[mainPart]" 当相关数据(mainPart)发生变化才重新渲染 -->
    <div class="main" v-if="mainPart.topModule" v-memo="[mainPart]">
      <!-- 房间特点 -->
      <DetailInfos :infosData="mainPart.topModule" :ref="getSectionRefs" />
      <!-- 房屋设施 -->
      <DetailFacility
        :facility-data="mainPart.dynamicModule.facilityModule.houseFacility"
        :ref="getSectionRefs"
      />
      <!-- 房东介绍 -->
      <DetailLandlord
        :landlord-data="mainPart.dynamicModule.landlordModule"
        :ref="getSectionRefs"
      />
      <!-- 预定须知 -->
      <DetailReserve
        :reserve-data="mainPart.dynamicModule.rulesModule.orderRules"
        :ref="getSectionRefs"
      />
      <!-- 价格说明 -->
      <DetailPriceDescription
        :introduction-data="mainPart.introductionModule"
        :ref="getSectionRefs"
      />
    </div>
  </div>
</template>

<script setup>
import { computed, ref, reactive, onMounted } from "vue";
import { storeToRefs } from "pinia";
import { useRoute } from "vue-router";
import useDetailStore from "../../stores/modules/detailStore";
import DetailSwipe from "./cpns/detail-swipe.vue";
import DetailInfos from "./cpns/detail-infos.vue";
import DetailFacility from "./cpns/detail-facility.vue";
import DetailLandlord from "./cpns/detail-landlord.vue";
import DetailReserve from "./cpns/detail-reserve.vue";
import DetailPriceDescription from "./cpns/detail-priceDescription.vue";
import navBar from "../../components/nav-bar/nav-bar.vue";
import useScroll from "../../hooks/useScroll";

const route = useRoute();
const detailStore = useDetailStore();
const houseId = route.params.id;
// 根据houseId 发送网络请求
detailStore.fetchHouseInfosData(houseId);
// 解构detailStore 请求到的数据
const { mainPart, pricePart, currentHouse } = storeToRefs(detailStore);
// 返回到上一层
const onClickLeft = () => history.back();

// 顶部导航栏
const titles = ["概述", "设施", "介绍", "须知", "说明"];
const detailRef = ref();
const { scrollTop } = useScroll(detailRef);
// 下拉到一定高度显示tab
const isShowTab = computed(() => {
  return scrollTop.value > 288;
});
// 获取元素Ref
const sectionRefOffsetTop = reactive([]);
const getSectionRefs = (itemRef) => {
  sectionRefOffsetTop.push(itemRef?.$el);
};
// tab 点击事件
const onClickTab = () => {
  const top = sectionRefOffsetTop[active.value].offsetTop - 44;
  detailRef.value.scrollTo({
    top: top,
    behavior: "smooth",
  });
};
const active = ref(0);
</script>

<style lang="less" scoped>
.discounts {
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 4px;
  background-image: url("https://pic.tujia.com/upload/festatic/publicImages/big_promotion_bg.png");
}
.main {
  background-color: #f1f3f5;
  > * {
    margin-bottom: 10px;
  }
}
.tab {
  width: 100%;
  z-index: 9;
  position: fixed;
  top: 0;
  left: 0;
}
</style>
